import { InfoCircleOutlined } from '@ant-design/icons';
import { Card, Col, Row, Table, Tooltip } from 'antd';
import { TinyArea } from '@ant-design/charts';
import React from 'react';
import numeral from 'numeral';
import NumberInfo from './NumberInfo';
import Trend from './Trend';
import styles from '../style.less';
const columns = [
  {
    title: '年级',
    dataIndex: 'tableindex1',
    key: 'tableindex1',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '年级人数',
    dataIndex: 'tableindex2',
    key: 'tableindex2',
  },
  {
    title: '请假人数',
    dataIndex: 'tableindex3',
    key: 'tableindex3',
    // sorter: (a, b) => a.count - b.count,
    className: styles.alignRight,
  },
  {
    title: '缺勤人数',
    dataIndex: 'tableindex4',
    key: 'tableindex4',
    // sorter: (a, b) => a.count - b.count,
    className: styles.alignRight,
  },
  {
    title: '请假率',
    dataIndex: 'tableindex5',
    key: 'tableindex5',
    sorter: (a, b) => a.count - b.count,
    className: styles.alignRight,
  },
  {
    title: '缺勤率',
    dataIndex: 'tableindex6',
    key: 'tableindex6',
    // sorter: (a, b) => a.count - b.count,
    className: styles.alignRight,
  },
  {
    title: '出勤率',
    dataIndex: 'tableindex7',
    key: 'tableindex7',
    // sorter: (a, b) => a.count - b.count,
    className: styles.alignRight,
  },
];

const TopSearch = ({ loading, visitData2, searchData, dropdownGroup }) => (
  <Card
    loading={loading}
    bordered={false}
    title="年级出勤情况（今日）"
    extra={dropdownGroup}
    style={{
      height: '100%',
    }}
  >
    <Row gutter={68}>
      <Col
        sm={12}
        xs={24}
        style={{
          marginBottom: 24,
        }}
      >
        <NumberInfo
          subTitle={
            <span>
              学生总数
              <Tooltip title="指标说明">
                <InfoCircleOutlined
                  style={{
                    marginLeft: 8,
                  }}
                />
              </Tooltip>
            </span>
          }
          gap={8}
          total={numeral(500).format('0,0')}
          status="up"
          subTotal={0}
        />
        <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
      </Col>
      <Col
        sm={12}
        xs={24}
        style={{
          marginBottom: 24,
        }}
      >
        <NumberInfo
          subTitle={
            <span>
              请假人数
              <Tooltip title="指标说明">
                <InfoCircleOutlined
                  style={{
                    marginLeft: 8,
                  }}
                />
              </Tooltip>
            </span>
          }
          total={5}
          status="down"
          subTotal={0}
          gap={8}
        />
        <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
      </Col>
    </Row>
    <Table
      rowKey={(record) => record.index}
      size="small"
      columns={columns}
      dataSource={searchData}
      pagination={{
        style: {
          marginBottom: 0,
        },
        pageSize: 5,
      }}
    />
  </Card>
);

export default TopSearch;
